@import 'styles/settings';
@import 'styles/ui.module';
@import 'styles/typography-extends';
@import 'styles/tooltip';

$site-gutter: 20px;
$map-attribution-height: 30px;
$legend-item-height: auto;
$legend-width: 260px;

%legend-ramp-text {
  font-family: $font-family-1-light !important;
  color: $grey-text;
  line-height: 10px;
}

%legend-ramp-bar {
  height: 6px;
  border-radius: 5px;
  margin-bottom: 4px;
}

%legend-label-text {
  background: transparent;
}

//legend tooltip styles
:global {
  .wri_api__c-legend-item-types {
    background: none !important;
  }

  .wri_api__c-legend-map { //legend container
    background: none !important;
    border: none !important;
    border-radius: 2px !important;
  }

  .wri_api__name {
    @extend %legend-ramp-text;
  }

  .wri_api__c-legend-type-gradient .wri_api__icon-gradient {
    @extend %legend-ramp-bar;
  }

  .wri_api__c-legend-item .wri_api__legend-item-container.wri_api__-sortable { //whole legend item padding
    padding: 0 12px 12px !important;
  }

  .wri_api__c-legend-item .wri_api__legend-item-container {
    padding: 0 12px 12px !important;

  }

  li.wri_api__c-legend-item { //use this only for legend item container
    @include backdropBlur();

    margin-bottom: 0;
    border-bottom: none;
    border-radius: 0;
    height: $legend-item-height;

    &:first-child {
      border-radius: $border-radius-mobile;
    }

    @media #{$tablet-portrait} {
      border-radius: 2px;
      width: calc(#{$legend-width} - #{$scrollbar-width});

      &:first-child {
        border-radius: 2px;
      }
    }

    &:not(:last-child) {
      &::before {
        @extend %spacer;
        content: '';
        position: absolute;
        bottom: 0;
        height: 2px;
        width: 100%;
      }
    }
  }

  li > .wri_api__c-legend-item { //disable white background for item legend label
    @extend %legend-label-text;
    align-items: center;
    z-index: 0;
  }

  .wri_api__toggle-legend {
    display: none;
  }

  .wri_api__c-legend-handler {
    height: 100%;
    left: 0 !important;
    top: 0 !important;
    width: 100%;
    z-index: 1;
    svg {
      display: none;
    }
  }

  .wri_api__legend-item-header > h3 {
    margin-bottom: 0;
    margin-top: 12px !important;
  }

  .wri_api__c-legend-list {
    @extend %verticalScrollbar;

    @media #{$tablet-portrait} {
      max-height: calc(4 * 85px);
    }
  }
}

.legend {
  @include bottom();
  position: fixed;

  @media #{$tablet-portrait} {
    position: absolute;
    bottom: $site-gutter;
    right: $site-gutter;
    width: $legend-width;
  }
}

.itemButton {
  position: relative;
}

body {
  :global {
    .-sortable {  //when dragging the legend item
      background: $firefly;
      box-shadow: 0 2px 10px 0 rgba(23,27,48,0.15);
    }
  }
}

.disclaimer {
  @include backdropBlur();
  color: $white;
  padding: 20px;
  text-align: center;
  @extend %subtitle;
}